HTML5中Canvas绘制曲线：圆、圆弧、贝塞尔曲线使用样例

绘制曲线有如下四个方法：arc()、artTo()、bezierCurveTo()和quadraticCurveTo()。 第一个比较简单，就是绘制一段圆弧。后面三个方法复杂一些，都需要定义控制点。

1，arc()绘制圆弧

圆弧就是圆上的一部分。要绘制圆弧必须确定：圆形的坐标、圆的半径、圆弧的起点角度和终点角度。 其中起点角度和终点角度都要用弧度表示，即常量pi的倍数（1pi是半圆，2pi是整个圆形）。

（1）下面使用arc()方法绘制一段圆弧：

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");   context.line; context.strokeStyle = "#cd2828";   //创建变量,保存圆弧的各方面信息 var centerX = 200; var centerY = 100; var radius = 80; var startingAngle = 0 * Math.PI; var endingAngle = 1.5 * Math.PI;   //使用确定的信息绘制圆弧 context.arc(centerX, centerY, radius, startingAngle, endingAngle); context.stroke();

（2）如果在调用stroke()之前调用closePath()，就会在圆弧的起点和终点之间绘制一条直线，得到一个封闭的小半圆。

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");   context.line; context.strokeStyle = "#cd2828";   //创建变量,保存圆弧的各方面信息 var centerX = 200; var centerY = 100; var radius = 80; var startingAngle = 0 * Math.PI; var endingAngle = 1.5 * Math.PI;   //使用确定的信息绘制圆弧 context.arc(centerX, centerY, radius, startingAngle, endingAngle); context.closePath(); context.stroke();

（3）如果想画一个整圆，将起点角度设为0，终点角度设为2pi即可。

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");   context.line; context.strokeStyle = "#cd2828";   //创建变量,保存圆弧的各方面信息 var centerX = 200; var centerY = 100; var radius = 80; var startingAngle = 0 * Math.PI; var endingAngle = 2 * Math.PI;   //使用确定的信息绘制圆弧 context.arc(centerX, centerY, radius, startingAngle, endingAngle); context.stroke();

2，bezierCurveTo()绘制贝塞尔曲线

贝塞尔曲线之所以流行 ，是因为这种曲线能够保证平滑，哪怕再小、再大的弧度都可以。 一个贝塞尔曲线有两个控制点。曲线的起点切线连接第一个控制点，终点切线连接第二个控制点。两条连接线之间就是曲线。 曲线的弯曲程度（曲率）由控制点与起点和终点的距离决定。距离越远，弯曲度越大（有点像引力，只不过越远力越大）。

（1）下面绘制一条贝塞尔曲线（第一个控制点在起点上放，第二个控制点在终点下方）

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");   context.line; context.strokeStyle = "#cd2828";   //把笔移动到起点位置 context.moveTo(20, 150);   //创建变量,保存两个控制点以及曲线终点信息 var control1_x = 187; var control1_y = 0; var control2_x = 429; var control2_y = 380; var endPointX = 365; var endPointY = 50;   //绘制曲线 context.bezierCurveTo(control1_x, control1_y, control2_x, control2_y, endPointX, endPointY); context.stroke();

（2）在线生成贝塞尔曲线 地址：http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html 我们可以拖动控制点、起点和终点任意改变贝塞尔曲线的形状。同时右侧会实时地生成相应的HTML5绘图代码，真正所见即所得。